<template>
	<view class="content" :style="{height:winH}">
		<view class="searchAndPick">
			<view class="searchBox row">
				<view class="addr"><text class="icon"></text>上海</view>
				<view class="inputBox row">
					<uni-icons type="search" size="18" color="#C5C5C5"></uni-icons>
					<input class="uni-input" confirm-type="search" v-model="search" placeholder-style="color:#C5C5C5;" placeholder="输入小区名或地址" @blur="resetScroll" />
				</view>
			</view>
			<view class="cherryPick center">
				<view class="pick flex center" @click="showMetroPop=falses,showPop=true,popStyle='area'"><text class="line1">{{district?district:'区域'}}</text> <u-icon class="ml-4rpx" color="#999" size="12" name="arrow-down-fill"></u-icon></view>
				<view class="pick flex center pickBig" @click="showMetroPop=falses,showPop=true,popStyle='price'"><text class="line1">{{(priceIndex===0||priceIndex)?priceList[priceIndex].title:'价格'}}</text><u-icon class="ml-4rpx" color="#999" size="12" name="arrow-down-fill"></u-icon></view>
				<view class="pick flex center" @click="openMetro()">{{metroName}}<u-icon class="ml-4rpx" color="#999" size="12" name="arrow-down-fill"></u-icon></view>
				<view class="pick flex center" @click="showMetroPop=falses,showPop=true,popStyle='sort'">{{(orderIndex===0||orderIndex)?sortList[orderIndex].title:'排序'}}<u-icon class="ml-4rpx" color="#999" size="12" name="arrow-down-fill"></u-icon></view>
				<!-- <view class="pick flex center" @click="open()">筛选<u-icon class="ml-4rpx" color="#999" size="12" name="arrow-down-fill"></u-icon></view> -->
			</view>
		</view>
		<view class="mainbox" :style="`padding-top:${popTop}`">
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
				<roomList :roomsList="roomsList"></roomList>
			</mescroll-body>
		</view>
		<!-- 筛选 -->
		<view class="popupBox" :style="{height:popH,top:popTop}" v-if="showPop">
			<view class="mask" @click="close()"></view>
			<view class="popup-content">
				<!-- 筛选 -->
				<view class="morePick column" v-if="popStyle=='pick'" :style="{height:popH}">
					<view class="pickBox">
						<view class="pickList">
							<view class="pickTit">出租方式</view>
							<view class="list">
								<view class="li" :class="is_whole===1?'active':''" @click="is_whole=1">整租</view>
								<view class="li" :class="is_whole===0?'active':''" @click="is_whole=0">合租</view>
							</view>
						</view>
						<view class="pickList">
							<view class="pickTit">付款方式</view>
							<view class="list">
								<view class="li" :class="pay_method===1?'active':''" @click="pay_method=1">月付</view>
								<view class="li" :class="pay_method===0?'active':''" @click="pay_method=0">其他</view>
							</view>
						</view>
						<view class="pickList">
							<view class="pickTit">户型</view>
							<view class="list">
								<view class="li" :class="house_type===item.val?'active':''" v-for="(item,i) in houseTypeList" @click="house_type=item.val">{{item.title}}</view>
							</view>
						</view>
						<view class="pickList">
							<view class="pickTit">特色需求</view>
							<view class="list">
								<view class="li" :class="requirement==item.val?'active':''" v-for="(item,i) in requirementList" @click="requirement=item.val">{{item.title}}</view>
							</view>
						</view>
					</view>
					<view class="pickBtm row">
						<view class="reset" @click="handleReset">重置</view>
						<button type="primary" class="handle" @click="handleSearch">确定</button>
					</view>
				</view>
				<!-- 区域 -->
				<view class="commonPick" v-if="popStyle=='area'">
					<view class="pickLi" @click="changeDistrict('不限')">不限</view>
					<view class="pickLi" v-for="(item,i) in common.districtArr" @click="changeDistrict(item)">{{item}}</view>
				</view>
				<!-- 价格 -->
				<view class="commonPick" v-if="popStyle=='price'">
					<view class="pickLi" v-for="(item,i) in priceList" @click="changePrice(item,i)">{{item.title}}</view>
				</view>
				<!-- 排序 -->
				<view class="commonPick" v-if="popStyle=='sort'">
					<view class="pickLi" v-for="(item,i) in sortList" @click="changeSort(item,i)">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- 城市筛选 -->
		<view class="popupBox" :style="{height:popCityH,top:popCityTop}" v-if="showCityBox">
			<view class="mask" @click="showCityBox=false"></view>
			<view class="popup-city">
				<view class="list" v-for="(item,i) in citys" :key="i">
					<view class="title">{{i}}</view>
					<view class="libox">
						<view class="li" v-for="(city,k) in citys[i]" :key="i" @click="changeCity(city)">{{city}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 地铁筛选 -->
		<subwayPop v-if="showMetroPop" :height="popH" :top="popTop" @changeSub="changeSub"></subwayPop>
	</view>
</template>

<script lang="ts" setup>
import { ref,nextTick } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import roomList from '@/components/roomList/distributedRoomList.vue'
import { noConcentratedFindHouse } from '@/common/API/room'
import common from '@/utils/common'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import subwayPop from "@/components/subwayPop/index.vue"
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)
const winH = ref()
const popH = ref()
const popTop = ref()
const popCityH = ref()
const popCityTop = ref()
const showPop = ref(false)
const showMetroPop = ref(false)
const popStyle = ref()
const roomsList = ref([])
const citys = ref<any>([])
const search = ref()
// 区域
const district = ref()
// 价格
const priceList = ref([
	{ title: '不限',val: '' },
	{ title: '0-2000',val: '-1,2000' },
	{ title: '2000-3000',val: '2000,3000' },
	{ title: '3000-5000',val: '3000,5000' },
	{ title: '5000-7500',val: '5000,7500' },
	{ title: '7500-10000',val: '7500,10000' },
	{ title: '10000以上',val: '10000,-1' },
])
const priceIndex = ref()
const priceVal = ref()
// 排序
const sortList = ref([
	{ title: '不限',val: '' },
	{ title: '推荐',val: '1' },
	{ title: '最新',val: '2' },
	{ title: '价格升',val: '3' },
	{ title: '价格降',val: '4' },
	{ title: '面积升',val: '5' },
	{ title: '面积降',val: '6' },
])
const orderIndex = ref()
const order = ref()
//筛选
const is_whole = ref()
const pay_method = ref()
const house_type = ref()
const requirement = ref()
const houseTypeList = ref([
	{ title: '一室',val: 1 },
	{ title: '二室',val: 2 },
	{ title: '三室',val: 3 },
	{ title: '四室',val: 4 },
	{ title: '其他',val: 5 }
])
const requirementList = ref([
	{ title: '独立卫生间',val: 'tag_toilet' },
	{ title: '独立阳台',val: 'tag_balcony' },
	{ title: '独立厨房',val: 'tag_kitchen' },
	{ title: '空调',val: 'air_conditionings' },
	{ title: 'wifi',val: 'internet' },
])
const userCity = ref()
// 城市筛选
const showCityBox = ref(false)

onLoad(()=>{
	console.log(common.districtArr)
	//获取屏幕高度
	winH.value = uni.getWindowInfo().windowHeight+"px";
	// 获取元素高度
	nextTick(()=>{
		let query = uni.createSelectorQuery();
		query.select('.searchAndPick').boundingClientRect();
		query.exec(res => {
			let _h = res[0].height;
			popH.value = (uni.getWindowInfo().windowHeight)+"px";
			popTop.value = _h+"px";
			popCityH.value = (uni.getWindowInfo().windowHeight - _h + 36)+"px";
			popCityTop.value = (_h - 36)+"px"
		});
	});
})



// 筛选
const open = ()=>{
	if(popStyle.value=='pick'){
		showPop.value = !showPop.value;
	}else{
		showPop.value = true;
		popStyle.value='pick';
	};
	showMetroPop.value = false;
}
const close = ()=>{
	showPop.value = false;
}
// 地铁筛选
const openMetro = ()=>{
	showPop.value = false;
	showMetroPop.value = true;
}
const metroName = ref('地铁')
const longitude = ref()
const latitude = ref()
const changeSub = (item)=>{
	showMetroPop.value = false
	longitude.value = item.lon
	latitude.value = item.lat
	metroName.value = item.name
	resetScroll();
}
/*上拉加载的回调*/
const upCallback = async (mescroll)=>{
	console.log(mescroll)
	let priceArr = (priceIndex.value||priceIndex.value===0)?priceList.value[priceIndex.value].val.split(','):[]
	let params = {
		pageNum: mescroll.num,
		pageSize: mescroll.size,
		searchBox: search.value,
		district:  district.value=='不限'?'':district.value,
		monthRentalMin: priceArr.length?priceArr[0]:'',
		monthRentalMax: priceArr.length?priceArr[1]:'',
		longitude: longitude.value,
		latitude: latitude.value,
		sortRule: order.value,
		isWhole: '',
		bedRoomNum: '',
		publicFacilities: ''
	};
	let res = await noConcentratedFindHouse(params);
	console.log(res)
	let curPageData = res.list;
	let curPageLen = curPageData.length;
	if(mescroll.num == 1) roomsList.value = [];
	roomsList.value = roomsList.value.concat(curPageData);
	mescroll.endSuccess(curPageLen);
}
const changeDistrict = (item)=>{
	district.value = item;
	showPop.value = false;
	resetScroll();
}
const changePrice = (item,i)=>{
	priceIndex.value = i;
	priceVal.value = item.val;
	showPop.value = false;
	resetScroll();
}
const changeSort = (item,i)=>{
	orderIndex.value = i;
	order.value = item.val;
	showPop.value = false;
	resetScroll();
}
const handleReset = ()=>{
	is_whole.value = '';
	pay_method.value = '';
	house_type.value = '';
	requirement.value = '';
}
const handleSearch = ()=>{
	showPop.value = false;
	resetScroll();
}
const changeCity = (city)=>{
	city.value = city;
	showCityBox.value = false;
	resetScroll();
}
const resetScroll = ()=>{
	roomsList.value = [];
	downCallback()
}
</script>

<style lang="scss" scoped>
.content {
	background: #fff;
	.searchAndPick{
		position: fixed;
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		left: 0;
		width: 100%;
		z-index: 9;
		background: #fff;
	}
	.searchBox{
		padding: 14rpx 32rpx 12rpx;
		.addr{
			margin-right: 28rpx;
			height: 28rpx;
			line-height: 28rpx;
			.icon{
				display: inline-block;
				vertical-align: top;
				margin-right: 4rpx;
				width: 28rpx;
				height: 28rpx;
				background: url('#{$imgUrl}/icon/addr.png') no-repeat;
				background-size: 100%;
			}
		}
		.inputBox{
			flex: 1;
			border-radius: 8rpx;
			padding: 0 44rpx;
			height: 64rpx;
			background: #F5F5F5;
			.uni-input{
				margin-left: 10rpx;
				line-height: 34rpx;
				flex: 1;
			}
		}
	}
	.cherryPick{
		padding: 16rpx;
		// background-color: red;
		// display: flex;
		// justify-content: space-around;
		.pick{
			width: 150rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			flex: 1;
			text-align: center;
			line-height: 40rpx;
			color: #999;
		}
		// .pickBig{
		// 	flex: 1;
		// }
	}
	.mescroll-body{
		min-height: 600rpx !important;
	}
	.popupBox{
		width: 100%;
		position: fixed;
		top: 0;
		right: 0;
		.mask{
			width: 100%;
			height: 100%;
			opacity: 1;
			background-color: rgba(0, 0, 0, 0.4);
			transition: opacity 300ms ease 0ms, -webkit-transform 300ms ease 0ms, transform 300ms ease 0ms;
			transform-origin: 50% 50%;
			position: fixed;
			z-index: 9;
		}
	}
	.popup-content{
		position: relative;
		z-index: 99;
		.morePick{
			width: 638rpx;
			height: 100%;
			position: absolute;
			right: 0;
			.pickBox{
				background: #fff;
				padding: 10rpx 22rpx;
				overflow-y: scroll;
				flex: 1;
				.pickList{
					.pickTit{
						font-size: 30rpx;
						font-weight: bold;
						line-height: 42rpx;
						padding: 24rpx 12rpx;
					}
					.list{
						.li{
							width: 150rpx;
							height: 84rpx;
							line-height: 84rpx;
							border-radius: 2rpx;
							background: #F8F8F8;
							display: inline-block;
							margin: 0 38rpx 30rpx 0;
							text-align: center;
							font-size: 24rpx;
							&.active{
								background: #FFEBD2;
								color: $uni-color-primary;
							}
						}
					}
				}
			}
			.pickBtm{
				.reset{
					width: 210rpx;
					height: 100rpx;
					line-height: 100rpx;
					color: $uni-color-primary;
					text-align: center;
					background: #fff;
				}
				.handle{
					flex: 1;
					background: $uni-color-primary;
					color: #fff;
					height: 100rpx;
					line-height: 100rpx;
					border-radius: 0;
					&::after{
						display: none;
					}
				}
			}
		}
		.commonPick{
			width: 100%;
			background: #fff;
			/* #ifdef H5 */
			padding-top: 88rpx;
			/* #endif */
			max-height: 700rpx;
			overflow-y: scroll;
			.pickLi{
				text-align: center;
				line-height: 72rpx;
				border-bottom: 2rpx solid #f7f7f7;
				&:last-child{
					border: none;
				}
			}
		}
	}
	.popup-city{
		background: #fff;
		position: relative;
		z-index: 99;
		.list{
			.title{
				background: #f5f5f5;
				padding: 0 32rpx;
				line-height: 68rpx;
			}
			.li{
				padding: 0 32rpx;
				line-height: 72rpx;
				border-bottom: 2rpx solid #f5f5f5;
				&:last-child{
					border: none;
				}
			}
		}
	}
}
</style>
